<template>
    <div class="box">
        <backcon></backcon>
        <div class="content" v-for="(v,i) in arr" :key="i" @click="xiangqing(v.educationCourseId)">
            <div class="left-img"><img :src="v.image" alt=""></div>
            <div class="right-title"><p>{{v.title}}</p></div>
        </div>
    </div>
</template>
<script>
import backcon from '../../backcon.vue'
export default {
    components:{backcon},
    data() {
        return {
            pageIndex:0,
            pageSize:10,
            keyword:'',
            arr:[]
        }
    },
    created(){
        this.getParams();
        this.spfllist()
    },
    activated:function(){
        this.getParams();
        this.spfllist()
    },
     watch: {
    // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
    '$route': 'getParams'
    },
       methods:{
        spfllist:function(){
            this.axios({
                url:"https://api.hongbeibang.com/search/getMoreCourse?_t=1585393996184&csrfToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOjAsImV4cCI6MTc3MTU2NjMxNCwiaWF0IjoxNTgyMTc3NTE0fQ.iBmGtQ0fasTTaSuApywmN6Ms0aNYwUvkGLoXX6V6hO8",
                method:"get",
                params: {
                    pageIndex:this.pageIndex,
                    pageSize:this.pageSize,
                    keyword:this.keyword
                }
            }).then((ok)=>{
                this.arr=ok.data.data.search.list.course.data
                //window.console.log(this.arr)
            })
        },
         getParams:function(){
            // 取到路由带过来的参数
            var keyword= this.$route.query.keyword;
            // 将数据放在当前组件的数据内
            this.keyword = keyword
           // window.console.log(this.keyword)
      },
      xiangqing(e){
          this.$router.push({
               path:"/spfllistXQ",
               query:{
                   educationCourseId:e
               }
            })
      }
    }
}
</script>
<style scoped>
.box{width: 90%;margin: .2rem auto;overflow: hidden}
.content{display: flex;justify-content: space-between}
.left-img img{width: 1.5rem}
.right-title p{padding: .05rem;margin-left: .1rem;font-weight: bold;font-size: .14rem}
</style>